/*
 * @Author: 李九阳
 * @Date: 2021-12-13 20:08:32
 * @LastEditors: 李九阳
 * @LastEditTime: 2021-12-14 10:30:45
 */
// 背景：在一些后台管理系统，我们可能需要根据用户角色进行一些操作权限的判断，很多时候我们都是粗暴地给一个元素添加 v-if / v-show 来进行显示隐藏，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。针对这种情况，我们可以通过全局自定义指令来处理。

// 需求：自定义一个权限指令，对需要权限判断的 Dom 进行显示隐藏。

// 思路：

// 自定义一个权限数组
// 判断用户的权限是否在这个数组内，如果是则显示，否则则移除 Dom
import { App } from "vue";
import router from "@/router";
const checkArray = (key: any) => {
  const currentRoute = router.currentRoute.value;
  console.log("当前路由");
  console.log(currentRoute);
  const arr = ["1", "2", "3", "4"];
  const index = arr.indexOf(key);
  if (index > -1) {
    return true; // 有权限
  } else {
    return false; // 无权限
  }
};
export default (app: App<Element>) => {
  //自定义组件
  app.directive("permission", {
    mounted: (el: HTMLElement, binding: { value: any }) => {
      const permission = binding.value; // 获取到 v-permission的值
      if (permission) {
        const hasPermission = checkArray(permission);
        if (!hasPermission) {
          // 没有权限 移除Dom元素
          el.parentNode && el.parentNode.removeChild(el);
        }
      }
    },
  });
};
// export default {
//   inserted: function (el: HTMLElement, binding: any) {
//     const permission = binding.value; // 获取到 v-permission的值
//     if (permission) {
//       const hasPermission = checkArray(permission);
//       if (!hasPermission) {
//         // 没有权限 移除Dom元素
//         el.parentNode && el.parentNode.removeChild(el);
//       }
//     }
//   },
// };
